<template>
	<view class="container999" @click="conClick" @touchstart="refreshStart" @touchmove="refreshMove"
	 @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
		<clickCircle ref="clickCircle"></clickCircle>
		<view class='nav'>
			<!-- 导航栏 agents导航栏标题 -->
			<navTab ref="navTab" :tabTitle="tabBars" @changeTab='changeTab'></navTab>
		</view>
		<view style="width: 100%; min-height: 94rpx;">占位盒子</view>
		<!-- 公告 -->
		<view style="min-height: 40rpx;background-color: #F5F5F5;">
			<uni-notice-bar v-if="text" showIcon="true" :text="text"></uni-notice-bar>
		</view>
		<!-- swiper切换 swiper-item表示一页 scroll-view表示滚动视窗 -->
		<swiper style="min-height: 100vh;" :current="currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in newsList" :key="listIndex">
				<!-- <swiper-item  v-for="(tab,index) in tabBars" :key="index"> -->
				<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation>
					<!-- <view class="line-h"> </view> -->
					<view class='content'>
						<view class='item' v-for="(item,index) in listItem" v-if="listItem" :key="index" @click="openURL(item.url)">
							<view class="title">
								<text class="no">{{index+1}}</text>
								<text class="title-text">{{item.title}}</text>
								<text class="num">{{item.hot_value}}</text>
							</view>
							<view class="line-h"> </view>
						</view>
					</view>
					<view class='noCard' v-if="listItem===undefined || listItem.length===0"> 暂无数据 </view>
					<view style="width: 100%;height: 100rpx;opacity:0.5;line-height: 100rpx;text-align: center;">
						<!-- 底部占位盒子 -->
						<text>@二毛 2021</text>
						</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import refresh from '@/components/refresh.vue';
	import navTab from '@/components/navTab.vue';
	import clickCircle from '@/components/clickCircle.vue';
	export default {
		components: {
			refresh,
			navTab,
			clickCircle
		},
		data() {
			return {
				tabBars: [{
					name: '微博',
					id: 'weibo'
				}, {
					name: '知乎',
					id: 'zhihu'
				}, {
					name: '百度',
					id: 'baidu'
				}, {
					name: '微信',
					id: 'weixin'
				}, {
					name: '抖音',
					id: 'douyin'
				}, {
					name: '视频',
					id: 'video'
				}], //导航栏标题，对象数组
				newsList: [], //列表内容，二维数组
				currentTab: 0, //sweiper所在页
				text: '' //公告内容
			};
		},
		onLoad() {
			this.newsList = new Array(this.tabBars.length)
			this.getList(this.currentTab);
			var _this = this;
			uniCloud.callFunction({
				name: "notice",
				success(data) {
					_this.text = data.result
					// console.log(this.text) 
					// console.log(data)
				}
			})
		},
		onShow() {},
		onHide() {},
		methods: {
			// 点击列表数据，跳转第三方链接
			openURL(url) {
				// #ifdef H5
				window.open(url)
				// #endif
				// #ifdef MP
				uni.setClipboardData({
					data: url
				});
				uni.showModal({
					content: '已自动复制网址，请在手机浏览器里粘贴该网址',
					showCancel: false
				});
				// #endif
			},
			// 加载一个Tab的数据列表
			getList(index) {
				uni.showLoading({
					title: "正在加载..."
				})
				var _this = this;
				uniCloud.callFunction({
					name: 'news',
					data: {
						type: _this.tabBars[index].id
					},
					success(data) {
						_this.$set(_this.newsList, index, data.result)
						uni.hideLoading()
						uni.showToast({
							icon: 'success',
							title: '请求成功！'
						})
					},
					fail() {
						uni.hideLoading()
						uni.showToast({
							icon: 'none',
							title: '请求失败！'
						})
					}
				})
			},
			// 切换Tab事件（滑动swiper切换也会触发）
			changeTab(index) {
				this.currentTab = index;
				if (this.newsList[index] === undefined) {
					this.getList(index);
				}
			},
			// 全局点击反馈事件
			conClick(e) {
				this.$refs.clickCircle.conClick(e);
			},
			// swiper 滑动，会触发切换Tab事件
			swiperTab: function(e) {
				var index = e.detail.current //获取索引
				this.$refs.navTab.longClick(index);
			},
			// 刷新touch监听
			refreshStart(e) {
				this.$refs.refresh.refreshStart(e);
			},
			refreshMove(e) {
				this.$refs.refresh.refreshMove(e);
			},
			refreshEnd(e) {
				this.$refs.refresh.refreshEnd(e);
			},
			// 下拉刷新事件
			isRefresh() {
				this.getList(this.currentTab)
				this.$refs.refresh.endAfter() //刷新结束调用
			}
		}
	};
</script>
<style lang="scss">
	.container999 {
		width: 100%;
		font-size: 28rpx;
		min-height: 100vh;
		overflow: hidden;
		// color: #fff;
		position: relative;
		background-color: #FFFFFF;
		// white-space: nowrap;
	}

	.content {
		width: 100%;
	}

	.item {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: white;
		background: #FFFFFF;
		position: relative;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
	}

	.title {
		width: 100%;
		// margin: auto 0;
		display: flex;
		flex-direction: row;
		// align-items: center;
	}

	.no {
		font-style: oblique;
		color: #ffaa00;
		width: 35rpx;
		text-align: center;
		padding-left: 40rpx;
		padding-right: 30rpx;
		// margin: auto;
		// align-items: center;
	}

	.title-text {
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-right: 10rpx;
	}

	.num {
		// width: 150rpx;
		font-size: 22rpx;
		padding: 0 20rpx;
		color: #666666
	}

	.line-h {
		width: 100%;
		height: 1rpx;
		transform: scaleY(0.3);
		background-color: #cccccc;
	}

	.noCard {
		width: 90%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		margin: 200rpx auto;
		background-color: white;
		color: #999999;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.10);
		border-radius: 10rpx;
	}

	.nav {
		position: fixed;
		// left: 0;
		// top: 0;
		width: 100%;
		/* #ifdef H5 */
		max-width: 375px;
		/* #endif */
		// overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 24rpx;
		background-color: #FFFFFF;
		z-index: 996;
	}
</style>
